<template>
  <div id="Darecommend">
    <div class="container">
      <div class="header">
        <span class="bobafont bobamusic-prev" @click="$router.back(-1)"></span>
        <div class="time">
          <p>{{ nowDay }}</p>
          <p>{{ nowMonth }}</p>
        </div>
      </div>
      <div class="playlist">
        <div class="transmit">
          <div class="play">
            <span class="bobafont bobamusic-icon" @click="playAll"
              ><p>播放全部</p></span
            >
          </div>
        </div>
        <div class="musikspielen">
          <dic
            class="musiclist"
            @click="playMusic(item)"
            v-for="(item, index) in recommendList"
            :key="index"
          >
            <div>
              <div class="videoimages">
                <img
                  :src="item.al.picUrl + '?param=100y100'"
                  width="100%"
                  height="100%"
                />
              </div>
              <div class="songinformation">
                <div>{{ item.name }}</div>
                <div>{{ item.ar[0].name }}</div>
              </div>
              <div class="playmusic">
                <span class="bobafont bobamusic-bofang"></span>
                <span class="bobafont bobamusic-gengduo"></span>
              </div>
            </div>
          </dic>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//调用接口
import { Darecommendsong } from "network/api/RecommendApi";
export default {
  name: "dayrecommend",
  data() {
    return {
      recommendList: [],
      nowMonth: "", //当前月份
      nowDay: "", //当前日期
    };
  },
  methods: {
    playMusic(item) {
      console.log(item);
      this.$store.commit("setCurrentMusicId", item.id);
      this.$store.commit("setLoading", true);
    },
    currentTime() {
      setInterval(this.formatDate, 500); //定义获取时间的方法
    },

    //获取年月日
    formatDate() {
      var data = new Date();
      let year = data.getFullYear();
      let month = data.getMonth() + 1;
      let day = data.getDate();
      this.month = check(month);
      this.day = check(day);
      function check(i) {
        let num = i < 10 ? "0" + i : i; //如果只有一位，则前面补零
        return num;
      }
      this.nowMonth = "/" + month;
      this.nowDay = +day;
    },
    playAll() {
      console.log("fdsf");
      // 添加到播放列表//并且播放第一首歌
      this.$store.commit("setMusicList", this.recommendList);
      this.$store.commit(
        "setCurrentMusicId",
        this.$store.state.musicList[0].id
      );
      this.$store.commit("setLoading", true);
    },
  },
  mounted() {
    this.currentTime();
    Darecommendsong().then((res) => {
      this.recommendList = res.data.data.dailySongs;
      console.log(res);
    });
  },
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); //在实例销毁前，清楚定时器
    }
  },
};
</script>

<style scoped>
#Darecommend .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 2;
}
#Darecommend .container .header {
  width: 100%;
  height: 200px;
  background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606977231914&di=f58c5093e7688ca51038eb6f1a62adc9&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F1e%2F6113ce8549.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: -30px;
}
#Darecommend .container .header .bobafont {
  color: #fff;
  font-size: 27px;
  line-height: 80px;
  margin-left: 10px;
}
#Darecommend .container .header .time {
  display: flex;
  margin-left: 10px;
  color: #fff;
}
#Darecommend .container .header .time p:nth-child(1) {
  font-size: 40px;
  margin-top: 10px;
}
#Darecommend .container .header .time p:nth-child(2) {
  font-size: 25px;
}
#Darecommend .container .playlist {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 100%;
  height: 75.3%;
  background: #e5faf8;
  margin-top: -45px;
  box-shadow: 0px -10px 2px 2px #8eafab;
}
#Darecommend .container .playlist .transmit {
  width: 100%;
  height: 50px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  /* background: red; */
}
#Darecommend .container .playlist .transmit .play {
  width: 50%;
  height: 35px;
  /* background: #fff; */
  margin-left: 20px;
  margin-top: 10px;
}
#Darecommend .container .playlist .transmit .play .bobafont {
  line-height: 35px;
  font-size: 20px;
  color: #2ae0c8;
}
#Darecommend .container .playlist .transmit .play p {
  color: #2ae0c8;
  font-size: 18px;
  margin-left: 30px;
  margin-top: -35px;
}
#Darecommend .container .playlist .musikspielen {
  width: 100%;
  height: 92%;
  overflow: auto;
  margin-top: -10px;
  /* background: gold; */
}
#Darecommend .container .playlist .musikspielen .musiclist {
  height: 60px;
  /* background: cornflowerblue; */
  margin: 10px;
  display: flex;
  flex-direction: column;
}
#Darecommend .container .playlist .musikspielen .musiclist div {
  width: 100%;
  height: 100%;
  /* background: hotpink; */
  display: flex;
}
#Darecommend .container .playlist .musikspielen .musiclist .videoimages {
  width: 15%;
  height: 80%;
  /* background: indianred; */
  margin-top: 5px;
}
#Darecommend .container .playlist .musikspielen .musiclist .videoimages img {
  border-radius: 5px;
}
#Darecommend .container .playlist .musikspielen .musiclist .songinformation {
  width: 65%;
  height: 80%;
  /* background: green; */
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}
#Darecommend
  .container
  .playlist
  .musikspielen
  .musiclist
  .songinformation
  div:nth-child(1) {
  margin-top: 5px;
  font-size: 15px;
  color: #2ae0c8;
  overflow: hidden;
  white-space: nowrap;
}
#Darecommend
  .container
  .playlist
  .musikspielen
  .musiclist
  .songinformation
  div:nth-child(2) {
  color: #2ae0c8;
  font-size: 10px;
  opacity: 0.5;
}
#Darecommend .container .playlist .musikspielen .musiclist .playmusic {
  width: 15%;
  height: 80%;
  margin-top: 5px;
}
#Darecommend
  .container
  .playlist
  .musikspielen
  .musiclist
  .playmusic
  .bobafont {
  font-size: 30px;
  color: #bfbfbf;
  line-height: 50px;
}
#Darecommend
  .container
  .playlist
  .musikspielen
  .musiclist
  .playmusic
  .bobafont:nth-child(2) {
  /* font-size: 20px;
  margin-top: 10px;
  line-height: 20px; */
  -webkit-transform: rotate(-90deg);
}
</style>